<template>
  <!-- 帖子整体容器 -->
  <view class="post" @click="goBlogDisplay">
    <!-- 用户信息区域 -->
    <view class="userDisplay">
       <!-- 用户头像，使用 <image> 标签 -->
        <image 
             class="profile" 
            :src="proUrl" 
             mode="aspectFill" 
             @error="onImageError"
         ></image>
      <!-- 用户名 -->
      <view class="userName">{{post.username}}</view>
    </view>
    
    <!-- 帖子内容区域 -->
    <view class="postContent">
      <!-- 帖子文本部分，支持动态宽度 -->
      <view class="text" :class="{ fullWidth: !post.pictureImg }">
        
        <!-- 帖子标题 -->
        <view class="postTitle">{{post.postTitle}}</view>
        
        <!-- 帖子简介 -->
        <view class="postIntroduce">{{post.postIntroduce}}</view>
      </view>

      <!-- 帖子图片部分，如果有图片则显示 -->
      <view class="picture" 
        v-if="post.pictureImg" 
        :style="{ backgroundImage: 'url(' + post.pictureImg + ')' }"
      ></view>
    </view>
    
    <!-- 帖子工具栏 -->
    <view class="postTools">
      <!-- 左侧工具区，包含点赞、浏览和收藏工具 -->
      <view class="leftTools">
        <view v-for="(tool, index) in tools" :key="index" class="toolItem">
          <!-- 图标 -->
          <image class="iconfont" :class="tool.icon"></image>
          
          <!-- 数量 -->
          <text class="count">{{ tool.count }}</text>
        </view>
      </view>
      
      <!-- 右侧工具区，用于显示更多操作按钮 -->
      <view class="rightTool">
        <image class="iconfont icon-weibiaoti5"></image>
      </view>
    </view>
  </view>
</template>

<script>
	import request from "../../utils/request.js";
	import file from "../../utils/file.js";
export default {
  name: "recommended-post-xhd",
  props: {
    // 传入的帖子数据
    post: {
      type: Object,
      required: true,
    }
  },
  data() {
    return {
	proUrl:this.post.profileImg,
	  // 默认头像图片 URL
	 defaultProfileImg: '/static/img/default-avatar.jpeg',
      // 工具数据，包括点赞、浏览和收藏
      tools: [
        { icon: 'icon-icon', count: this.post.likeCount, text: '点赞' },
        { icon: 'icon-liulan', count: this.post.viewCount, text: '浏览' },
        { icon: 'icon-shoucangjia', count: this.post.collectCount, text: '收藏' },
      ]
    };
  },
  mounted() {
  	this.loadImage(this.proUrl);
	this.handlePictureImgChange(this.post.pictureImg);
  },
  watch: {
     // 监听 proUrl 的变化
      // proUrl(newUrl) {
      //   this.loadImage(newUrl);
      // },
	  'post.profileImg':{
		handler(newImg) {
		    this.loadImage(newImg);
		  },
		 // immediate: true // 立即执行一次处理函数
		},
      // 监听 post.pictureImg 的变化
      'post.pictureImg': {
        handler(newImg) {
          this.handlePictureImgChange(newImg);
        },
        //immediate: true // 立即执行一次处理函数
      }
    },
  methods: {
    // 点击帖子时，触发 postClicked 事件，传递帖子 ID
    goBlogDisplay() {
      this.$emit('postClicked', this.post.id);
    },
	 // 处理图片加载失败的情况
	onImageError(event) {
	     this.proUrl = this.defaultProfileImg; // 图片加载失败时设置为默认图片
		 //console.log(this.proUrl);
	 },
	  // 加载图片的方法
	async  loadImage(url) {
	       if (url==='loadingImg') {
			if(this.post.userId){
				let url=this.baseUrl+"/file/"+this.post.userId+"?type=avatar";
				//console.log("头象",url);
				let result=await request.sendUniGetRequestByNetWork(this.post.userId,undefined,url);
				if(result){
					if(result.code===1){
						let profileImgResult=result.data;
						if(profileImgResult){
							if(profileImgResult.imgType && profileImgResult.fileContent){
								this.proUrl=file.generateImagUrl(profileImgResult.fileContent,profileImgResult.imgType);
								return;
							}
						}
					}
				}
			}
			this.proUrl=this.defaultProfileImg;
	       }else{
			   this.proUrl=this.defaultProfileImg;
		   }
	     },
	     // 处理 post.pictureImg 变化的方法
	     async  handlePictureImgChange(newImg) {
	       if (newImg==='loadingImg') {
	        if(this.post.id){
	        	let url=this.baseUrl+"/file/"+this.post.id+"?type=cover";
	        //	console.log("封面",url);
	        	let result=await request.sendUniGetRequestByNetWork(this.post.id,undefined,url);
				if(result){
					if(result.code===1){
						let coverImageResult=result.data;
						if(coverImageResult){
							//console.log("进入" ,coverImageResult,coverImageResult.imgType,coverImageResult.fileContent);
							if(coverImageResult.imgType && coverImageResult.fileContent){
								this.post.pictureImg=file.generateImagUrl(coverImageResult.fileContent,coverImageResult.imgType);
								return;
							}
						}
					}
				}
	        }
			this.post.pictureImg=undefined;
	       } 
		   
	     }
  },
  
}
</script>

<style lang="scss">
/* 帖子外部容器 */
.post {
  background-color: white;    /* 背景色为白色 */
  display: flex;               /* 使用 Flexbox 布局 */
  flex-direction: column;      /* 子元素垂直排列 */
  padding: 20rpx;              /* 内边距 */
  //margin-bottom: 10rpx;        /* 底部外边距 */
  border-bottom: 1rpx solid #ccc; /* 添加透明底部边框 */
}

/* 用户信息区域 */
.userDisplay {
  height: 60rpx;               /* 高度设为60rpx */
  display: flex;               /* 使用 Flexbox 布局 */
  align-items: center;         /* 垂直居中对齐 */
  margin-bottom: 10rpx;        /* 下边距 */
  
  /* 头像样式 */
  .profile {
    width: 50rpx;              /* 头像宽度 */
    height: 50rpx;             /* 头像高度 */
    border-radius: 50%;        /* 圆形头像 */
  }

  /* 用户名样式 */
  .userName {
   // font-size: 30rpx;          /* 字体大小 */
    margin-left: 10rpx;        /* 与头像之间的间距 */
    color: #333;               /* 字体颜色 */
  }
}

/* 帖子内容区域 */
.postContent {
  display: flex;              /* 使用 Flexbox 布局 */
  align-items: center;        /* 垂直对齐 */
  padding: 10rpx;             /* 内边距 */
  margin-bottom: 10rpx;       /* 下边距 */
  
  /* 帖子文本样式 */
  .text {
    flex: 1;                  /* 占据剩余空间 */
    margin-left: 10rpx;        /* 左侧间距 */
    
    &.fullWidth {
      flex: 0 0 90%;           /* 如果没有图片则占据 90% 宽度 */
    }

    /* 帖子标题样式 */
    .postTitle {
      font-size: 1.1rem;       /* 字体大小 */
      //font-weight: bold;       /* 加粗 */
      display: -webkit-box;    /* 使用 Webkit Box 布局 */
      -webkit-box-orient: vertical; /* 垂直排列 */
      -webkit-line-clamp: 2;   /* 限制显示两行 */
      overflow: hidden;        /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 使用省略号 */
    }

    /* 帖子简介样式 */
    .postIntroduce {
      font-size: 20rpx;         /* 字体大小 */
      color: #666;              /* 字体颜色 */
      display: -webkit-box;     /* 使用 Webkit Box 布局 */
      -webkit-box-orient: vertical; /* 垂直排列 */
      -webkit-line-clamp: 2;    /* 限制显示两行 */
      overflow: hidden;         /* 超出部分隐藏 */
      text-overflow: ellipsis;  /* 使用省略号 */
    }
  }

  /* 帖子图片样式 */
  .picture {
    width: 20%;               /* 占 20% 宽度 */
    height: 80rpx;             /* 固定高度 */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
}

/* 帖子工具栏 */
.postTools {
  display: flex;              /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 左右对齐 */

  /* 左侧工具区 */
  .leftTools {
    display: flex;            /* 使用 Flexbox 布局 */
    //gap: 10rpx;               /* 间隔10rpx */
    margin-left: 15rpx;
    .toolItem {
      display: flex;          /* 使用 Flexbox 布局 */
      align-items: center;    /* 垂直居中 */
      margin-right: 20rpx;    /* 右边距 */
      .count {
        margin-left: 5rpx;     /* 数字与图标之间的间距 */
      }
    }
  }

  /* 右侧更多工具按钮 */
  .rightTool {
    display: flex;            /* 使用 Flexbox 布局 */
    align-items: center;      /* 垂直居中 */
    justify-content: center;  /* 水平居中 */
    margin-right: 10rpx;      /* 右边距 */
  }

  /* 图标样式 */
  .iconfont {
    text-align: center;
    line-height: 30rpx;
    height: 30rpx;
    width: 30rpx;
    font-size: 30rpx;
  }
}
</style>
